<script setup lang="tsx">
  import { reactive, ref, unref } from 'vue'
  import { ContentWrap } from '@/components/ContentWrap'
  import { Search } from '@/components/Search'
  import { Table } from '@/components/Table'
  import Add from './component/Add.vue'
  import Modify from './component/Modify.vue'
  import { ElCollapseTransition } from 'element-plus'
  import { useTable } from '@/hooks/web/useTable'
  import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
  import { BaseButton } from '@/components/Button'
  // import { TableData } from '@/api/table/types'
  // import { getTableListApi, delTableListApi } from '@/api/table'

  defineOptions({
    name: '{{ upperFirstName }}'
  })

  const crudSchemas = reactive < CrudSchema[] > ()
  // @ts-ignore
  const { allSchemas } = useCrudSchemas(crudSchemas)

  const ids = ref < string[] > ([])

  const searchParams = ref({})
  const setSearchParams = (params: any) => {
    searchParams.value = params
    getList()
  }

  const { tableRegister, tableState, tableMethods } = useTable({
    fetchDataApi: async () => {
      const { currentPage, pageSize } = tableState
      const res = await getTableListApi({
        pageIndex: unref(currentPage),
        pageSize: unref(pageSize),
        ...unref(searchParams)
      })
      return {
        list: res.data.list,
        total: res.data.total
      }
    },
    fetchDelApi: async () => {
      const res = await delTableListApi(unref(ids))
      return !!res
    }
  })
  const { loading, dataList, total, currentPage, pageSize } = tableState
  const { getList, getElTableExpose, delList } = tableMethods

  const show = ref(false)
  let currentAction: any = undefined
  const AddAction = () => {
    currentAction = Math.random() > 0.5 ? Add : Modify
    show.value = !show.value
    // push('/example/example-add')
  }

  const delLoading = ref(false)

  const delData = async (row: TableData | null) => {
    const elTableExpose = await getElTableExpose()
    ids.value = row ? [row.id] : elTableExpose?.getSelectionRows().map((v: TableData) => v.id) || []
    delLoading.value = true
    await delList(unref(ids).length).finally(() => {
      delLoading.value = false
    })
  }

  const action = (row: TableData, type: string) => {
    push(`/example/example-${type}?id=${row.id}`)
  }
</script>

<template>
  <ContentWrap>
    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />

    <div class="mb-10px">
      <BaseButton type="primary" @click="AddAction">新增</BaseButton>
      <BaseButton :loading="delLoading" type="danger" @click="delData(null)">删除</BaseButton>
    </div>

    <el-collapse-transition>
      <component :is="currentAction" v-show="show" />
    </el-collapse-transition>

    <Table v-model:pageSize="pageSize" v-model:currentPage="currentPage" :columns="allSchemas.tableColumns"
      :data="dataList" :loading="loading" :pagination="{ total }" @register="tableRegister" />
  </ContentWrap>
</template>